<template>
	<view class="main" style="overflow: hidden;">
		<u-navbar title="售后详情" :background="bc" title-color="#FFF" back-icon-color="#FFF" :border-bottom="false">
		</u-navbar>
		<view class="u-skeleton">
			<view class="ml30 mr30" style="padding-top: 40rpx;" v-if="loadingSkeleton">
				<view class="u-skeleton-fillet h-skeleton" style="width: 300rpx;"></view>
				<view class="u-skeleton-fillet h-skeleton mt20"></view>
				<view class="u-skeleton-fillet mt20" style="height: 200rpx;"></view>
			</view>
			<img src=".../../../static/background-image.png" style="position: absolute;top: 0;width: 100%;"
				mode="widthFix"></img>
			<view class="content-box p20">
				<!-- 内容 -->
				<view class="" style="padding: 20rpx 0 10rpx 10rpx;">
					<view class="">
						<view class="df aic jcsb cf" v-if="orderInfo.busType == 1">
							<view class="df aic">
								<nmr-icon name="daifukuan" size="54" color="#fff"></nmr-icon>
								<view class="" v-if="orderInfo.auditStatus==0">
									<text
										class=" fs36 ml20">{{orderInfo.optType==1?'退差价':orderInfo.optType==2?'补差价':''}}待审核</text>
								</view>
								<view class="" v-if="orderInfo.auditStatus==1">
									<text class=" fs36 ml20">待支付</text>
								</view>
								<view class="" v-if="orderInfo.auditStatus==2">
									<text class=" fs36 ml20" v-if="orderInfo.optType==1">退差价成功</text>
									<text class=" fs36 ml20" v-if="orderInfo.optType==2">补差价成功</text>
								</view>
								<text class="fs28 ml20" style="color: #FCF16C;">
									+{{orderInfo.changePlatformMoney||0}}</text>
							</view>
							<text class="fw4 fs22">{{orderInfo.createTime||'--'}}</text>
						</view>
						<view class="df aic jcsb cf" v-else>
							<view class="df aic">
								
								<view class="fs36 ml20 df aic" v-if="orderInfo.auditStatus==3">
									<nmr-icon name="tuikuanshouhou1" size="54" color="#fff"></nmr-icon>
									退款成功
									<!-- <text class=" fs36 ml20" v-if="orderInfo.optType==1">退差价成功</text> -->
									<text class="fs28 ml20" style="color: #FCF16C;">
										{{orderInfo.changePlatformMoney||0}}元</text>
								</view>
								<view class="fs36 cf ml20" v-else-if="orderInfo.auditStatus==-3||orderInfo.auditStatus==-4">
									<nmr-icon name="jujue" size="54" color="#fff"></nmr-icon>
									已拒绝
								</view>
								<view class="fs36 cf ml20" v-else>
									<nmr-icon name="shenhezhong-2" size="54" color="#fff"></nmr-icon>
									审核中
								</view>
							</view>
							<text class="fw4 fs22">{{orderInfo.createTime||'--'}}</text>
						</view>
						<!-- 多退少不 -->
						<template v-if="orderInfo.auditStatus==2&&orderInfo.busType == 1">
							<template v-if="orderInfo.optType==2">
								<view class="cf fs24 mt20">
									补差价部分金额已经按照通过微信完成支付！
								</view>
							</template>
							<template v-if="orderInfo.optType==1">
								<view class="cf fs24 mt20">
									退差价部分金额已经按照支付路径原路返回，请注意查收！
								</view>
								<view class="cf df aic mt20">
									<nmr-icon name="daifukuan" size="30" color="#fff"></nmr-icon>
									<text class="fs22 ml15">说明：退回金额可以在支付方式应用中“账单明细”中查看！</text>
								</view>
							</template>
						</template>
						<template v-if="orderInfo.busType == 2">
							<template v-if="orderInfo.auditStatus==3">
								<view class="cf fs24 mt20">
									您的诉求已处理，退款已按照支付路径原路返回，请注意查收！
								</view>
								<view class="cf df aic mt20">
									<nmr-icon name="daifukuan" size="30" color="#fff"></nmr-icon>
									<text class="fs22 ml15">说明：退回金额可以在支付方式应用中“账单明细”中查看！</text>
								</view>
							</template>
							<template v-else-if="orderInfo.auditStatus==-3||orderInfo.auditStatus==-4">
								<view class="fs24 mt20" style="color: #FCF16C;">
									很抱歉，你的请求被商家拒绝，请您联系客服处理！
								</view>
								<view class="fs24 mt10" style="color: #FCF16C;">
									拒绝理由：{{orderInfo.supplierAuditReason||orderInfo.reason}}
								</view>
							</template>
							<template v-else="orderInfo.auditStatus==0">
								<view class="cf fs24 mt20">
									您的问题已提交，请耐心等待~！
								</view>
							</template>
						</template>
					</view>
				</view>

				<view class="bgcf p30 bdr20  mt30" style="position: relative;" v-if="false">
					<view class="df aic jcsb mb30" style="position: relative;" v-if="orderInfo.shopPurOrderInfo">
						<view class="df aic">
							<nmr-icon name="dizhi2" color="#47A848" size="30"></nmr-icon>
							<view class="ml30">
								<view>
									<text style="color: #1D1D1D;"
										class="fs30 titleLabel">{{orderInfo.shopPurOrderInfo.getName}}</text>
									<text class="c6 fs26 ml20">{{orderInfo.shopPurOrderInfo.getPhone}}</text>
								</view>
								<view class="fs26 mt20 " style="color: #3D3D3D;">
									{{orderInfo.shopPurOrderInfo.getAddress}}{{orderInfo.shopPurOrderInfo.getAddressInfo}}
								</view>
							</view>
						</view>
					</view>

				</view>
				<!-- 售后信息 -->
				<view class="bgcf bdr20 p30 mt30" v-if="orderInfo.busType==2">
					<!-- <u-card margin="30rpx 0" :body-style="{
						padding:'0'
					}"> -->
					<view class="df aic jcsb" slot="head">
						<view class="df aic">
							<view class="labelStyle">

							</view>
							<text class="headTitle fs28 ml15">售后信息</text>
						</view>

					</view>
					<view class="df aic jcsb mt20 ">
						<view>
							<nmr-icon name="type" color="#48A147" class="mr18"></nmr-icon>
							<text class="c6 fs26">售后类型</text>
						</view>
						<view class="c3 fs26">
							{{orderInfo.shopPurOrderDetail&&orderInfo.shopPurOrderDetail[0].afterType==1?'全部售后':'部分售后'}}
						</view>
					</view>
					<u-line color="#E5E5E5" margin="20rpx 0" border-style="dashed" />
					<view class="df aic jcsb mt20 ">
						<view>
							<nmr-icon name="bohuiyuanyinguanli" color="#FF4500" class="mr18"></nmr-icon>
							<text class="c6 fs26">售后原因</text>
						</view>
						<view class="c3 fs26">
							{{orderInfo.shopPurOrderDetail&&orderInfo.shopPurOrderDetail[0].afterReason||''}}
						</view>
					</view>
					<u-line color="#E5E5E5" margin="20rpx 0" border-style="dashed" />
					<view class="df aic jcsb mt20 ">
						<view>
							<nmr-icon name="zhongliang" color="#4BB3F4" class="mr18"></nmr-icon>
							<text class="c6 fs26">售后重量</text>
						</view>
						<view class="c3 fs26">
							{{orderInfo.shopPurOrderDetail&&orderInfo.shopPurOrderDetail[0].changeSaleNum||''}}
							{{orderInfo.shopPurOrderDetail&&orderInfo.shopPurOrderDetail[0].saleUnit||''}}
						</view>
					</view>
					<u-line color="#E5E5E5" margin="20rpx 0" border-style="dashed" />
					<view class="df aic jcsb mt20 ">
						<view>
							<nmr-icon name="jine-2" color="#EF2929" class="mr18"></nmr-icon>
							<text class="c6 fs26">售后金额</text>
						</view>
						<view class="red fs26">
							<text class="fs24">￥</text>
							<text class="fs30">{{orderInfo.shopPurOrderDetail&&orderInfo.shopPurOrderDetail[0].changePlatformMoney}}</text>
						</view>
					</view>
					<u-line color="#E5E5E5" margin="20rpx 0" border-style="dashed" v-if="orderInfo.remark" />
					<view class="df  jcsb mt20 " style="    align-items: flex-start;" v-if="orderInfo.remark">
						<view>
							<nmr-icon name="type" color="#EF2929" class="mr18"></nmr-icon>
							<text class="c6 fs26">售后备注</text>
						</view>
						<view class=" fs26 remark-box" >
							<text class="fs30">{{orderInfo.remark||'--'}}</text>
						</view>
					</view>
					<!-- </u-card> -->
				</view>
				<!-- 售后凭证 -->
				<view class="mt20 bgcf bdr20 p30" v-if="orderInfo.busType==2">
					<view class="df aic jcsb" slot="head">
						<view class="df aic">
							<view class="labelStyle">

							</view>
							<text class="headTitle fs28 ml15">售后凭证</text>
						</view>
					</view>
					<!-- <u-read-more ref="uReadMore" :toggle="true" close-text="查看全部" color="#666"> -->
						<view class="df aic fww ">
								<video class="mt15 mr15" v-if="orderInfo.shopPurOrderDetail[0].afterVideo&&orderInfo.shopPurOrderDetail[0].afterVideo.length!=0"  v-for="item in orderInfo.shopPurOrderDetail[0].afterVideo" id="myVideo" @click="fullScreenTab(item,index)" :src="item"
									style="width: 200rpx;height: 200rpx;" controls>
									<cover-view class="maskBox" @click="fullScreenTab(item,index)">
									</cover-view>
								</video>
							<view class="mt15 mr15" style="width: 200rpx;height: 200rpx;" v-for="item in orderInfo.shopPurOrderDetail[0].afterImage" >
								<u-image :src="item"  width="200" height="200" border-radius="10px" @click="changeAfterImage"></u-image>
							</view>
						</view>
						
					<!-- </u-read-more> -->
				</view>
				<!-- 商品信息 -->
				<view class="">
					<u-card margin="30rpx 0" :body-style="{
						padding:'0'
					}">
						<view class="df aic jcsb" slot="head">
							<view class="df aic">
								<view class="labelStyle">

								</view>
								<text class="headTitle fs28 ml15">商品信息</text>
							</view>
							<view class="df aic pr">
								<nmr-icon name="kefufill" color="#48A147" size="30"></nmr-icon>
								<text class="fs26 ml10" style="color: #48A147;">客服</text>
								<button class="contact" open-type="contact"></button>
							</view>
						</view>

						<view class="" slot="body">
							<view class="df aic jcsb p030 mt30 mb30">
								<view class="df aic">
									<u-image
										src="https://zhaimeibianli.oss-cn-hangzhou.aliyuncs.com/house/2023/12/08/f4989a5873484230b793d370000ed5f0.png"
										mode="" shape="circle" height="40" width="40"></u-image>
									<text class="headTitle fs26 ml10">{{orderInfo.shopPurOrderChangeLogId||'--'}}</text>
								</view>
								<view class="fs24" :style="{'color': orderInfo.auditStatus==0?'#48A147':orderInfo.auditStatus==1?'#EF2929':'#FF4500'}" v-if="orderInfo.busType==1">
									{{orderInfo.auditStatus==0?'待审核':orderInfo.auditStatus==1?'待支付':'已完成'}}
								</view>
							</view>
							<u-line color="#E5E5E5" />
							<view class="df aic bdr10 p20 pb10" v-for="(item, index) in orderInfo.shopPurOrderDetail">
								<view class="">
									<view class="df">
										<view class="">
											<u-image width="120rpx" height="120rpx" border-radius="10" :src="item.image"
												class="u-skeleton-fillet bdr10"></u-image>
										</view>
										<view class="ml20 " style="width: 400rpx; ">

											<view class="textOver2 df aic u-skeleton-fillet aic ">
												<text
													:class="['tag-optType',{'less':item.optType==1}]">{{item.optType==1?'退':'补'}}</text>
												<text class="ml10 fs26 fwb"
													style="vertical-align: top">{{item.customGoodsName}}</text>
											</view>
											<view style="display: inline-block;"
												class=" c6 fs24  u-skeleton-fillet mt10">
												{{item.specName}}
											</view>
											<view class="dtsb  u-skeleton-fillet mt10">
												支持多退少补
											</view>
											
										</view>
										<view class="u-skeleton-fillet left-box  df jcsb">
											<view class="priceBox">
												<span class="fs24">¥</span>
												<span class="fs30 price">{{item.platformPrice||0}}</span>
											</view>

											<view class="c3 fs24" v-if="orderInfo.auditStatus==-3||orderInfo.auditStatus==-4">
												×{{item.saleNum}}
											</view>
											<view class="c3 fs24" v-else>
												×{{item.initSaleNum}}<text class="fs22 ml5"
													style="text-decoration: line-through;">×{{item.saleNum||0}}</text>
											</view>
										</view>
									</view>
									<view class="desc-dtsb mt20">
										实际出货
										<span v-if="orderInfo.auditStatus==-3||orderInfo.auditStatus==-4">
											{{item.saleNum||0}}
										</span>
										<span v-else>
											{{item.initSaleNum||0}}
										</span>
										{{item.saleUnit||0}},已送货单为准
									</view>
								</view>

							</view>


							<view class="u-skeleton-rect p020 mt5">
								<view class="df aic jcsb ">
									<view class="df jcfe" style="margin-left: auto;">
										<view class="all  u-skeleton-fillet" v-if="orderInfo.shopPurOrderDetail">
											<text
												v-if="calcNumLess(orderInfo.shopPurOrderDetail)>0">共补{{calcNumLess(orderInfo.shopPurOrderDetail).toFixed(2)||0}}件商品,</text>
											<text
												v-if="calcNumMore(orderInfo.shopPurOrderDetail)>0">共退{{calcNumMore(orderInfo.shopPurOrderDetail).toFixed(2)||0}}件商品</text>
										</view>
										<!-- <view class="priceBox">
											<span class="fs24">¥</span>
											<span class="fs30 price">33.00</span>
										</view> -->
									</view>
								</view>
							</view>
							<view class="df aic jcsb p020 mt5">
								<text></text>
								<view class="fs24">
									<!-- sendMoneyType 配送费 0-退 1-补 2不动 -->
									<text class="">(优惠券抵扣:</text>
									<text class="fs26 app-theme fwb">-￥{{orderInfo.discountMoney||'0.00'}}</text>
								<text v-if="orderInfo.sendMoneyType==0">,配送费:<text class="fs26 price fwb">退￥{{orderInfo.sendMoney||'0.00'}}</text></text>
								<text v-if="orderInfo.sendMoneyType==1">,配送费:<text class="fs26 app-theme fwb">补￥{{orderInfo.sendMoney||'0.00'}}</text></text>
									)
								</view>
							</view>
							<view class="df aic jcsb p020 mb30 mt5">
								<view class="fs26" v-if="orderInfo.optType==1&&orderInfo.auditStatus!=-3&&orderInfo.auditStatus!=-4">
									<text class="price">退款金额:</text>
									<text class=" price fwb">¥{{orderInfo.changePlatformMoney||0}}</text>
								</view>
								<view class="fs26" v-if="orderInfo.optType==2">
									<text class="price">补差价金额:</text>
									<text class=" price fwb">¥{{orderInfo.changePlatformMoney||0}}</text>
								</view>
								<text v-if="item.optType==3">
									无需操作
								</text>
								<!-- <view class="fs24">

									<text class="">最终交易金额:</text>
									<text class="fs26 price fwb">￥105.00</text>
								</view> -->
							</view>

						</view>
					</u-card>
				</view>
				<!-- 订单明细 -->
				<orderDetails :orderInfo="orderInfo" class="mb30"></orderDetails>
			</view>
		</view>
		<refundDetailPay @purOrderAudit="getOrderDetail" :orderInfo="orderInfo" :loading="loading"
			@handlesubmit="handlesubmit"></refundDetailPay>
		<u-skeleton :loading="loadingSkeleton" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	let shouldContinue = true;
	import orderPrice from './components/orderPrice.vue'
	import orderDetails from './components/refundDetail.vue'
	import refundDetailPay from './components/refundDetailPay.vue'

	import orderCmdy from './components/orderCmdy.vue'
	import navBg from "@/static/background-image.png"
	import {
		shopPurOrderChangeLogInfo,

	} from '@/api/order.js'
	let setIn = null

	import {
		getSysTime
	} from '@/utils/getSysTime'

	export default {
		components: {
			orderPrice,
			orderDetails,
			orderCmdy,
			refundDetailPay
		},
		data() {
			return {
				loadingSkeleton: false,
				qrcodeData: '',
				timer: null,
				loading: false,
				timeupSecond: 0,
				status: 1,
				bc: {
					backgroundImage: `url(${navBg})`,
					backgroundSize: '100%',
					backgroundRepeat: 'no-repeat',
				},
				orderDetailData: [{
						label: '期望时间',
						value: '立即送达'
					},
					{
						label: '配送方式',
						value: '配送上门'
					},
					{
						label: '订单编号',
						value: '12546587954'
					},
					{
						label: '下单时间',
						value: '2023-06-21 12:34:12'
					},
					{
						label: '支付方式',
						value: '微信支付'
					},
					{
						label: '支付单号',
						value: '400022665222155555'
					},
					{
						label: '支付时间',
						value: '2023-06-21 12:34:12'
					},
				],
				orderId: '',
				type: '',
				hopeTimeCalc: '',
				orderInfo: {
					auditStatus: 0,
					orderChildList: [],
					memberOrderAddress: {},
					hopeTime: ''
				},
				drawSetByOrderInfo: {},
				payImg: '',
				list:[]
				


			}
		},
		onLoad(e) {
			console.log(e)
			this.orderId = e.id;
		},
		onHide() {
			shouldContinue = false;
		},
		destroyed() {
			shouldContinue = false;
		},

		onShow() {
			this.getOrderDetail()
		},
		methods: {
			calcNumLess(e) {
				let num = e.reduce((e, c) => {
					let num = c.optType == 2 ? c.changeSaleNum : 0
					return e + num
				}, 0)
				return num || 0
			},
			calcNumMore(e) {
				let num = e.reduce((e, c) => {
					let num = c.optType == 1 ? c.changeSaleNum : 0
					return e + num
				}, 0)
				return num || 0
			},
			// 倒计时结束触发
			orderDown() {
				uni.showToast({
					title: '订单暂未支付，已为您取消',
					icon: 'none'
				})
				setTimeout(() => {
					uni.hideToast()
				}, 500)
				this.getOrderDetail()
			},
			async handlesubmit() {
				let priceInfo = {
					platformMoney: this.orderInfo.changePlatformMoney,
					sendMoney: 0,
					goodsMoney: this.orderInfo.changePlatformMoney || 0,
				}
				uni.redirectTo({
					url: '/pages/confirm/payPage?isLess=true&orderId=' + this.orderInfo
						.shopPurOrderChangeLogId + '&priceInfo=' + JSON
						.stringify(priceInfo) + '&szbankOpen=true'
				})
			},
			fullScreenTab(item, index) {
				let videoPlay = item
				uni.navigateTo({
					url:'/pages/fullScreenPlay?url=' + videoPlay
				})
			},
			changeAfterImage(index){
				uni.previewImage({
				  current: index, // 当前显示图片索引
				  urls: this.orderInfo.shopPurOrderDetail[0].afterImage// 需要预览的图片http链接列表
				});
			},
			getOrderDetail() {
				shopPurOrderChangeLogInfo(this.orderId).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.orderInfo = res.data
						let arr = []
						this.orderInfo.shopPurOrderDetail[0].afterImage = this.orderInfo.shopPurOrderDetail[0].afterImage&&this.orderInfo.shopPurOrderDetail[0].afterImage.split(',')||[]
						this.orderInfo.shopPurOrderDetail[0].afterVideo = this.orderInfo.shopPurOrderDetail[0].afterVideo&&this.orderInfo.shopPurOrderDetail[0].afterVideo.split(',')||[]
						console.log(this.orderInfo.shopPurOrderDetail[0].afterVideo );
						// if(this.orderInfo.shopPurOrderDetail[0].afterVideo){
						// }
						// console.log(arr,'arr');
						// this.list = arr
					}
					this.loadingSkeleton = false
				})
			},



		}
	}
</script>

<style lang="scss" scoped>
	.contact {
		top: 0;
		position: absolute;
		width: 120rpx;
		height: 100rpx;
		opacity: 0;
	}

	.desc-dtsb {
		color: #EF2929;
		font-size: 24rpx;
		margin-right: auto;
	}

	.dtsb {
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #EF2929;
		line-height: 32rpx;
		box-sizing: border-box;
		padding: 1rpx 10rpx;
		background: #FFF4F0;
		border-radius: 19rpx;
		border: 2rpx solid #EF2929;
		margin-bottom: 5rpx;
		text-align: center;
		display: inline-block;
		margin-left: 20rpx;
	}

	/deep/ .u-mode-center-box {
		background-color: transparent !important;
	}

	.titleLabel {
		font-weight: bold;
	}

	.main {
		width: 100%;
		min-height: 100vh;
		background: #f1f1f1;
		padding-bottom: 30rpx;
		box-sizing: border-box;
	}

	.price {
		color: #EF2929;
	}

	.content-box {
		position: relative;
	}

	.addressTag {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0 17rpx 0 17rpx;
		background: #47A848;
		font-size: 24rpx;
		font-family: PingFangSC-Regular-, PingFangSC-Regular;
		font-weight: normal;
		color: #FFFFFF;
		padding: 7rpx 16rpx;
	}

	.draw-box {
		margin: 20rpx 0;
		box-sizing: content-box;

		.draw-content {
			color: white;
			padding: 30rpx 20rpx;
			box-sizing: content-box;
		}

		.num {
			// padding: 10rpx;
			background: linear-gradient(90deg, #ED272A 0%, #FF7600 100%);
			margin: 0 auto;
			width: 78rpx;
			height: 78rpx;
			border: 4rpx solid #FFFFFF;
			font-size: 42rpx;
			border-radius: 50%;
			font-weight: bold;
			box-sizing: content-box;
		}
	}

	.headTitle {
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.labelStyle {
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
		border-radius: 22rpx;
	}

	.tag-box {
		font-size: 22rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #EF2929;
		background: #FFE2E2;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		padding: 2rpx 10rpx;
		display: inline-block;
	}

	.left-box {
		flex-direction: column;
		align-items: flex-end;
		width: 120rpx;
	}

	.priceBox {

		color: #EF2929;

		.price {
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
		}
	}

	.tag-optType {
		background-color: #ED272A;
		color: white;
		padding: 2rpx 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.less {
		background-color: #47A848;
	}
	.remark-box{
		width: 350rpx;
		text-align: left;
	}
</style>